<template>
	<view class="home">
		<view class="home-bar" :style="{ height: statusBarHeight + titleBarHeight + 'px' }">
			<view class="status-bar" :style="{ height: statusBarHeight + 'px' }"></view>
			<view :style="{ height: titleBarHeight + 'px' }" class="bar-content">
				<u-icon name="arrow-left" style="position: absolute;left: 20rpx;" size="40" @click="navBack"></u-icon>
				<view class="content-info" v-if="loading === false">
					<view class="info-nickname">{{ dataList.name }}</view>
					<view class="info-pid">Pid: {{ dataList.pid }}</view>
				</view>
			</view>
		</view>
		<view class="home-info">
			<skeleton
			    :loading="loading"
			    avatarSize="190rpx"
			>
				<view><u-image width="190rpx" height="190rpx" :src="dataList.avatar" shape="circle"></u-image></view>
			</skeleton>
			<skeleton
			    :loading="loading"
				:showTitle="true"
				:showAvatar="false"
				titleWidth="130px"
				titleHeight="18px"
				titleMargin="20px"
				:row="skeleton1.row"
			>
				<view class="info-base">
					<view class="base-sex">
						<view v-if="dataList.sex === 1" class="base-sex" style="background-color: rgba(0, 149, 255, 0.08);">
							<image src="../../../static/img/male.png" mode="" style="width: 26px;height: 18px;"></image>
							<!-- <u-icon name="man" color="#0095FF" size="25"></u-icon> -->
						</view>
						<view v-if="dataList.sex === 0" class="base-sex" style="background-color: rgba(255, 128, 128, 0.08);">
							<image src="../../../static/img/female.png" mode="" style="width: 26px;height: 18px;"></image>
							<!-- <u-icon name="woman" color="#FF8080" size="25"></u-icon> -->
						</view>
					</view>
					<view class="base-variety">{{ dataList.typeName }}</view>
					<view class="base-age">{{ dataList.bornDate }}岁</view>
				</view>
			</skeleton>
			<skeleton
			    :loading="loading"
				:showTitle="true"
				:showAvatar="false"
				titleWidth="258px"
				titleHeight="36px"
				titleMargin="0"
				:row="skeleton1.row"
			>
				<view class="info-message">
					<view class="message-item">
						<!-- <u-icon v-if="dataList.petFans" name="minus" color="#333333"></u-icon> -->
						{{ dataList.petFans ? dataList.petFans : 0 }}
						<view>宠粉</view>
					</view>
					<view class="message-line"></view>
					<view class="message-item">
						<!-- <u-icon name="minus" color="#333333"></u-icon> -->
						{{ dataList.diaryLikes ? dataList.diaryLikes : 0 }}
						<view>云吸</view>
					</view>
					<view class="message-line"></view>
					<view class="message-item">
						<!-- <u-icon name="minus" color="#333333"></u-icon> -->
						{{ dataList.diarys ? dataList.diarys : 0 }}
						<view>日记</view>
					</view>
				</view>
			</skeleton>
			<skeleton
			    :loading="loading"
				:showTitle="true"
				:showAvatar="false"
				titleWidth="258px"
				titleHeight="36px"
				titleMargin="20px"
				:row="skeleton1.row"
			>
				<view class="info-operation">
					<span style="width: 68rpx;"></span>
					<view class="operation-btn2" @click="setUpdate" v-if="dataList.masterFlag">编辑资料</view>
					<view :class="!Follow?'operation-btnS':'operation-btnS2'" @click="setFollow" v-else>{{Follow?'已吸宠':'吸宠'}}</view>
					<button open-type="share"><u-image width="68rpx" height="68rpx" src="@/static/diary/share1.png" mode="widthFix" shape="circle"></u-image></button>
				</view>
			</skeleton>
			<skeleton
			    :loading="loading"
				:showTitle="true"
				:showAvatar="false"
				titleWidth="258px"
				titleHeight="19px"
				titleMargin="0"
				:row="skeleton1.row"
			>
				<view>{{ dataList.sign ? dataList.sign : '这个铲屎官很懒,没有留下签名' }}</view>
			</skeleton>
		</view>
		<view class="home-content" v-if="dataArray.length === 0 && loading === false">
			<view class="content-none">
				<view class="none-text">这个铲屎官没有发表日记</view>
				<view><u-image width="492rpx" height="116rpx" src="https://csg-icon.oss-cn-hangzhou.aliyuncs.com/empty.png" :lazy-load="true"></u-image></view>
			</view>
		</view>
		<skeleton
		    :loading="loading"
			:showTitle="true"
			:showAvatar="false"
			titleWidth="258px"
			:titleHeight="skeletonHeight"
			titleMargin="0"
			:row="skeleton1.row"
		>
			<view class="home-list">
				<view class="scroll">
					<view class="waterfall">
						<view class="item" v-for="(item, index) in dataArray" :key="index" @click="setMesaage(item.id, item.type)">
							<view class="item-content">
								<view class="item-content-img"><image :src="item.cover" mode="aspectFill"></image></view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</skeleton>
		<view class="detail-end" style="padding-bottom: 160rpx;" v-if="remarkShow">- THE END -</view>
	</view>
</template>

<script>
import Skeleton from '../../../components/J-skeleton/J-skeleton.vue'
let systemInfo = uni.getSystemInfoSync();
export default {
	name:'home',
	components: {
		Skeleton
	},
	data() {
		return {
			statusBarHeight: 0,
			titleBarHeight: 0,
			skeletonHeight: 0,
			options: {},
			dataList: {},
			page: 1,
			size: 10,
			remarkShow: false,
			total: 0,
			dataArray: [],
			Follow: false,
			Follows: false,
			loading: true,
			skeleton1: {
				row: 0
			}
		};
	},
	onPullDownRefresh() {
		this.remarkShow = false;
		this.page = 1;
		this.getPetData();
		this.getDiaryHome();
		setTimeout(function() {
			uni.stopPullDownRefresh();
		}, 1000);
	},
	onReachBottom: function() {
		let self = this;
		if (self.dataArray.length < self.total) {
			self.remarkShow = false;
			self.page += 1;
			let data = {
				page: self.page,
				size: self.size,
				petId: self.options.id
			};
			self.$request(self.commonApi.diaryHome, 'POST', data, 'application/json').then(res => {
				let data = res.data.data.result;
				data.forEach(item => {
					self.dataArray.push(item);
				});
			});
		} else {
			self.remarkShow = true;
		}
	},
	onUnload() {
		if(this.Follows != this.Follow){
			this.$request(this.commonApi.onFollow+this.dataList.pid, 'GET').then(res => {
				// uni.showToast({
				// 	title: '已取消关注',
				// 	duration: 1500,
				// 	icon: 'none'
				// });
				this.getPetData()
				this.getDiaryHome()
			});
		}
	},
	methods: {
		setUpdate(){
			if(uni.getStorageSync('login')){
				uni.navigateTo({
					url: '../../../myPackageA/pet/addPet/addPet?pid=' + this.options.id
				})
			}else{
				uni.navigateTo({
					url: '../../../myPackageA/user/login/index'
				})
			}
		},
		setFollow() {
			if(uni.getStorageSync('login')){
				this.Follow = !this.Follow
				if(this.Follow){
					this.dataList.petFans += 1
				}else{
					this.dataList.petFans -= 1
				}
			}else{
				uni.navigateTo({
					url: '../../../myPackageA/user/login/index'
				})
			}
			// if (e == 2) {
			// 	self.$request(self.commonApi.onFollow+self.dataList.pid, 'GET').then(res => {
			// 		uni.showToast({
			// 			title: '已取消关注',
			// 			duration: 1500,
			// 			icon: 'none'
			// 		});
			// 		this.getPetData()
			// 		this.getDiaryHome()
			// 	});
			// } else {
			// 	self.$request(self.commonApi.onFollow+self.dataList.pid, 'GET').then(res => {
			// 		uni.showToast({
			// 			title: '关注成功',
			// 			duration: 1500,
			// 			icon: 'none'
			// 		});
			// 		this.getPetData()
			// 		this.getDiaryHome()
			// 	});
			// }
		},
		setMesaage(id, type) {
			if (type == 1) {
				uni.navigateTo({
					url: '../../../myPackageA/diary/Detail/diaryDetail?id=' + id
				});
			} else {
				uni.navigateTo({
					url: '../../../myPackageA/diary/player/player'
				});
			}
		},
		navBack() {
			uni.navigateBack({
				delta: 1
			});
		},
		getPetData() {
			let self = this;
			this.loading = true
			self.$request(self.commonApi.petId + this.options.id, 'GET').then(res => {
				this.loading = false
				self.dataList = res.data.data;
				self.Follow = self.dataList.followFlag
				self.Follows = self.dataList.followFlag
			});
		},
		getDiaryHome() {
			let self = this;
			let data = {
				page: self.page,
				size: self.size,
				petId: self.options.id
			};
			self.$request(self.commonApi.diaryHome, 'POST', data, 'application/json').then(res => {
				let data = res.data.data;
				self.total = data.meta.total;
				self.dataArray = data.result;
			});
		}
	},
	onLoad(option) {
		if (systemInfo.model.indexOf('iPhone') !== -1) {
			this.titleBarHeight = 44;
		} else {
			this.titleBarHeight = 48;
		}
		this.statusBarHeight = systemInfo.statusBarHeight;
		this.skeletonHeight = systemInfo.windowHeight - 608
		this.options = option;
		this.getPetData();
		this.getDiaryHome();
	},
	onShareAppMessage(res) {
		return {
			title: this.dataList.name,
			path: `/pages/pet/home/home?id=${this.options.id}`,
			imageUrl: this.dataList.avatar,
			success(res) {
				console.log('分享成功');
			},
			fail(err) {
				console.log('分享失败');
			}
		};
	}
};
</script>

<style>
page {
	background-color: #f9f9f9;
}
</style>

<style lang="scss" scoped>
.detail-end {
	padding: 40rpx 0;
	text-align: center;
	font-size: 24rpx;
	font-weight: 400;
	color: #999999;
	line-height: 34rpx;
}
.item-content {
	width: 360rpx;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	height: auto;
	box-sizing: border-box;
	overflow: hidden;
	position: relative;
	.item-content-img {
		width: 100%;
		image {
			width: 100%;
			min-height: 100%;
			zoom: 1;
			position: relative;
			z-index: 10;
		}
	}
}
.item {
	box-sizing: border-box;
	break-inside: avoid;
	// column-gap: 100rpx;
	padding: 0 8rpx 8rpx;
}
.waterfall {
	width: 100%;
	column-count: 2;
	column-gap: 0;
}
.scroll {
	width: 100%;
	display: flex;
	align-items: center;
}
.home-list {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
}
.home {
	height: 100%;
	.home-bar {
		position: sticky;
		top: 0;
		z-index: 999;
		width: 750rpx;
		background-color: #fff;
		.bar-content {
			width: 100%;
			display: flex;
			align-items: center;
			position: relative;
			.content-info {
				text-align: center;
				position: absolute;
				left: 325rpx;
				.info-nickname {
					font-size: 32rpx;
					font-weight: 700;
					color: #333333;
					line-height: 44rpx;
				}
				.info-pid {
					font-size: 22rpx;
					font-weight: 400;
					color: #999999;
					line-height: 32rpx;
				}
			}
		}
	}
	.home-info {
		padding: 40rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		background-color: #fff;
		.info-base {
			display: flex;
			margin: 40rpx 0;
			.base-sex {
				width: 36rpx;
				height: 36rpx;
				border-radius: 2px;
				display: flex;
				justify-content: space-evenly;
			}
			.base-variety {
				height: 36rpx;
				background: rgba(255, 154, 0, 0.08);
				border-radius: 4rpx;
				font-size: 24rpx;
				font-weight: 400;
				color: #ff9a00;
				line-height: 32rpx;
				display: flex;
				align-items: cneter;
				justify-content: center;
				padding: 2rpx 18rpx;
				margin: 0 18rpx;
			}
			.base-age {
				width: 80rpx;
				height: 36rpx;
				background: rgba(131, 86, 243, 0.08);
				border-radius: 4rpx;
				font-size: 24rpx;
				font-weight: 400;
				color: #8356f3;
				line-height: 32rpx;
				display: flex;
				align-items: cneter;
				justify-content: center;
			}
		}
		.info-message {
			display: flex;
			align-items: center;
			background-color: #fff;
			.info-base {
				display: flex;
				margin: 40rpx 0;
				.base-sex {
					width: 36rpx;
					height: 36rpx;
					border-radius: 2px;
					display: flex;
					justify-content: space-evenly;
				}
				.base-variety {
					height: 36rpx;
					background: rgba(255, 154, 0, 0.08);
					border-radius: 4rpx;
					font-size: 24rpx;
					font-weight: 400;
					color: #FF9A00;
					line-height: 32rpx;
					display: flex;
					align-items: cneter;
					justify-content: center;
					padding: 2rpx 18rpx;
					margin: 0 18rpx;
				}
				.base-age {
					width: 80rpx;
					height: 36rpx;
					background: rgba(131, 86, 243, 0.08);
					border-radius: 4rpx;
					font-size: 24rpx;
					font-weight: 400;
					color: #8356F3;
					line-height: 32rpx;
					display: flex;
					align-items: cneter;
					justify-content: center;
				}
			}
			.message-item {
				text-align: center;
				font-size: 26rpx;
				font-weight: 400;
				color: #999999;
				line-height: 36rpx;
				padding: 0 50rpx;
			}
			.message-line {
				width: 4rpx;
				height: 64rpx;
				background: #f9f9f9;
				border-radius: 4rpx;
			}
		}
		.info-operation {
			display: flex;
			margin: 40rpx 0;
			.operation-btnS2{
				width: 300rpx;
				height: 68rpx;
				background: #f2f2f2;
				border-radius: 40rpx;
				font-size: 32rpx;
				font-weight: 500;
				color: #333333;
				line-height: 68rpx;
				text-align: center;
				margin: 0 40rpx;
			}
			.operation-btnS{
				width: 300rpx;
				height: 68rpx;
				background: #FF9A00;
				border-radius: 40rpx;
				font-size: 32rpx;
				font-weight: 500;
				color: #fff;
				line-height: 68rpx;
				text-align: center;
				margin: 0 40rpx;
			}
			.operation-btn2{
				width: 300rpx;
				height: 68rpx;
				background: #f2f2f2;
				border-radius: 40rpx;
				font-size: 32rpx;
				font-weight: 500;
				color: #333333;
				line-height: 68rpx;
				text-align: center;
				margin: 0 40rpx;
			}
			.operation-btn1 {
				width: 300rpx;
				height: 68rpx;
				background: #ff9a00;
				border-radius: 40rpx;
				font-size: 32rpx;
				font-weight: 500;
				color: #ffffff;
				line-height: 68rpx;
				text-align: center;
				margin: 0 40rpx;
			}
			button {
				margin: 0;
				background-color: #fff;
				padding: 0;
			}
			button::after {
				border: none;
			}
		}
	}
	.home-content {
		width: 100%;
		.content-none {
			position: relative;
			margin: 120rpx 0 0 130rpx;
			.none-text {
				position: absolute;
				top: 50rpx;
				left: 150rpx;
				font-size: 26rpx;
				font-weight: 400;
				color: #999999;
				line-height: 36rpx;
			}
		}
	}
}
</style>
